<template>
  <view class="p-4 flex flex-wrap gap-x-4">
    <view
      v-for="item in pagination.list"
      :key="item.id"
      class="w-88 bg-white rounded-2xl p-3 mb-4"
    >
      <view class="w-full">
        <view class="flex justify-between items-center mb-2">
          <text class="font-bold text-xl text-black truncate w-54">{{
            item.name
          }}</text>
          <text
            v-if="item.status === 1"
            class="px-2 py-1 rounded-xl bg-indigo-100 text-blue-600 text-sm font-medium"
            >审批中</text
          >
          <text
            v-if="item.status === 2"
            class="px-2 py-1 rounded-xl bg-green-100 text-green-600 text-sm font-medium"
            >已通过</text
          >
          <text
            v-if="item.status === 3"
            class="px-2 py-1 rounded-xl bg-rose-100 text-rose-600 text-sm font-medium"
            >不通过</text
          >
        </view>
        <view class="w-full truncate mb-2">
          <text class="truncate"
            >单行文本:54354455465465465xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</text
          >
        </view>
        <view class="w-full truncate mb-2">
          <text class="truncate">单行文本:543544554654654584864</text>
        </view>
        <view class="flex justify-between items-center text-sm">
          <view class="flex items-center">
            <view class="mr-3">
              <image
                :src="user ? user.avatar : '/static/images/avatar1.jpg'"
                class="w-8 h-8 rounded-full"
                mode="scaleToFill"
              />
            </view>
            <text class="truncate w-36">{{ user?.nickname }}</text>
          </view>
          <text class="text-gray-500">{{
            formatTimestamp(item.startTime)
          }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { formatTimestamp } from '@/utils/dateUtil'
import { useUserStore } from '@/store'
// 获取用户的相关信息
const userStore = useUserStore()
const user = ref<any>({})
const props = defineProps({
  pagination: {
    type: Object,
    default() {
      return {}
    }
  }
})
onLoad((_option) => {
  //
  user.value = userStore.userInfo.user
})
</script>

<style lang="scss" scoped></style>
